<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>资料申请</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="./css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="./css/common.css" />
		<style>
			#apply-page {
				background-color: #4cc8cf;
				overflow: hidden;
				min-height: 100%;
			}
			.banner {
				max-width: 400px;
				margin: 0 auto;
				background: url('./image/banner_bg.png') no-repeat 0 50px;
				background-size: 100% auto;
			}
			.banner .title {
				width: 180px;
				height: 30px;
				line-height: 28px;
				background: url('./image/banner_title.png') no-repeat;
				background-size: 100% 100%;
				margin: 6px auto 10px;
				font-size: 16px;
				text-align: center;
				color: #333;
				font-weight: 700;
			}
			.center-pic {
				display: block;
				width: 230px;
				border-radius: 115px;
				margin: 0 auto;
			}
			.text-pic {
				display: block;
				width: 320px;
				margin: 12px auto;
			}
			
			.form .identifying-code {
				width: 100%;
				height: 100%;
			}
			.form .get-code-btn {
				width: 100%;
				height: 100%;
				border-radius: 5px;
				background-color: #4cc8cf;
				border-color: #4cc8cf;
			}
			.form .get-code-btn:active {
				background-color: #27e2ed;
				border-color: #27e2ed;
			}
			.form .mui-checkbox {
				padding: 0px 0 14px;
				box-sizing: content-box;
			}
			#apply-page .form a {
				height: 20px;
				line-height: 20px;
				color: #4cc8cf;
				padding: 0;
				padding-left: 30px;
				font-size: 12px;
			}
			#apply-page .form .mui-checkbox input[type="checkbox"] {
				width: 20px;
				height: 20px;
				left: 5px;
				top: 0px;
			}
			#apply-page .form .mui-checkbox input[type="checkbox"]:checked:before {
				color: #4cc8cf;
			}
			#apply-page .form .mui-checkbox input[type="checkbox"]:before {
				font-size: 20px;
			}
			.form .apply-btn {
				width: 100%;
				height: 40px;
				background-color: #4cc8cf;
				border-color: #4cc8cf;
				font-size: 15px;
			}
			.form .apply-btn:active {
				background-color: #27e2ed;
				border-color: #27e2ed;
			}
		</style>
	</head>

	<body>
		<div class="mui-content opers-page" id="apply-page">
			<div class="banner">
				<h1 class="title">横幅文字文字文字</h1>
				<img class="center-pic" src="./image/pic1.png" />
				<img class="text-pic" src="./image/banner_text.png">
			</div>
			<form class="form">
				<div class="input-row">
					<div class="input-wrap">
						<span class="mui-icon iconfont icon-shouji-tianchong"></span>
						<input type="text" id="phone" class="mui-input-clear" placeholder="请输入手机号">
					</div>
				</div>
				<div class="input-row has-col">
					<div class="input-wrap">
						<span class="mui-icon iconfont icon-password"></span>
						<input type="text" id="identcode" class="mui-input-clear" placeholder="请输入右图的验证码">
					</div>
					<div class="right-col" onclick="changeCode()">
						<img class="identifying-code" id="identifying-code" src="./image/pic2.png">
					</div>
				</div>
				<div class="input-row has-col">
					<div class="input-wrap">
						<span class="mui-icon iconfont icon-securityCode-b"></span>
						<input type="text" id="identphone" class="mui-input-clear" placeholder="请输入收到的验证码">
					</div>
					<div class="right-col">
						<button type="button" class="mui-btn mui-btn-primary get-code-btn" onclick="getCode()">获取验证码</button>
					</div>
				</div>

				<div class="mui-input-row mui-checkbox mui-left">
				  	<a href="./protocol.html">您同意创鑫服务协议</a>
				  	<input name="sureproto" id="sureproto" value="false" type="checkbox">
				</div>
				<button type="button" class="mui-btn mui-btn-primary apply-btn" onclick="applySure()">立即申请</button>
			</form>
		</div>
		<script src="./js/mui.min.js"></script>
		<script src="./js/common.js"></script>
		<script>
			console.log('apply page start');

			// 表单验证
			function formValidate(form) {
				if (!validate(form.phone, 'phone')){
					mui.toast('请输入格式正确的手机号', {
						duration: 3000
					});
					return;
				}
				if (!validate(form.identcode, '4str')){
					mui.toast('请输入格式正确的图片验证码', {
						duration: 3000
					});
					return;
				}
				if (!validate(form.identphone, '4str')){
					mui.toast('请输入格式正确的短信验证码', {
						duration: 3000
					});
					return;
				}
				return true;
			}

			// 提交表单
			function applySure() {
				var phone = document.querySelector('#phone').value;
				var identcode = document.querySelector('#identcode').value;
				var identphone = document.querySelector('#identphone').value;
				var sureproto = document.querySelector('#sureproto').checked;
				var form = {
					phone: phone,
					identcode: identcode, // 图片验证码
					identphone: identphone // 短信验证码
				};
				if (!sureproto) {
					mui.toast('请先阅读服务协议', {
						duration: 3000
					});
					return;
				}
				if (!formValidate(form)) {
					return;
				}
				// 发送提交请求
				mui.ajax('http://121.41.85.178:7300/mock/5acc68cb77a58d43f11ae3e4/muiapi/apply',{
					data: form,
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(data){
						console.log(data);
						// 成功后跳转
						window.location.href = './opers.html';
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			}

			// 更新图形验证码
			function changeCode() {
				// 发送提交请求(服务端可以限制提交频率)
				mui.ajax('http://121.41.85.178:7300/mock/5acc68cb77a58d43f11ae3e4/muiapi/changecode',{
					data: {
					},
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					// headers:{'Content-Type':'application/json'},	              
					success:function(data){
						console.log(data);
						var dom = document.querySelector('#identifying-code');
						dom.src = data.url;
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			}

			// 获取验证码
			function getCode() {
				// 发送提交请求(服务端可以限制提交频率)
				mui.ajax('http://121.41.85.178:7300/mock/5acc68cb77a58d43f11ae3e4/muiapi/code',{
					data: {

					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(data){
						console.log(data);
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			}


		</script>
	</body>

</html>